<template>
	<view class="bottom">
		<view class="nav-box">
			<view class="nav-tab" :class="{'nav-tab-active':active==0}" @click="toIndex(0)">
				<view class="nav-icon">
					<view class="circle">
						<view class="icon-wrap">
							<svg t="1622620960805" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6937" xmlns:xlink="http://www.w3.org/1999/xlink">
								<path d="M556.586667 159.36l288.490666 183.914667A64 64 0 0 1 874.666667 397.248v392.746667a64 64 0 0 1-64 64H555.456l0.021333-196.992H490.666667v196.992H234.666667a64 64 0 0 1-64-64v-398.293334a64 64 0 0 1 30.272-54.4l287.530666-178.346666a64 64 0 0 1 68.138667 0.426666zM810.666667 790.016V397.226667L522.197333 213.333333 234.666667 391.68v398.336h192v-197.013333h192.810666v196.992H810.666667z" p-id="6938"></path>
							</svg>
						</view>
					</view>
				</view>
				<view class="nav-text">
					素材库
				</view>
			</view>
			<view class="nav-tab" :class="{'nav-tab-active':active==1}" @click="toIndex(1)" v-if="false">
				<view class="nav-icon" >
					<view class="circle">
						<i class="iconfont cate" />
					</view>
				</view>
				<view class="nav-text">
					分类
				</view>
			</view>
			<view class="nav-tab" :class="{'nav-tab-active':active==1}" @click="toIndex(1)">
				<view class="nav-icon" >
					<view class="circle">
						<view class="icon-wrap">
							<svg t="1622710396605" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4249" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M455.338667 117.333333a193.557333 193.557333 0 0 1 193.557333 193.557334v90.752a200.042667 200.042667 0 0 1-60.330667 143.146666l-39.936 38.997334a3.562667 3.562667 0 0 0-1.066666 2.538666l-0.021334 4.224 278.421334 130.453334a103.104 103.104 0 0 1 59.264 88.597333l0.106666 4.778667v7.530666a84.757333 84.757333 0 0 1-84.757333 84.757334H95.424a84.757333 84.757333 0 0 1-84.586667-79.210667l-0.106666-2.517333L10.666667 820.693333l0.021333-6.336c0-37.76 20.629333-72.490667 53.76-90.538666l1.984-1.024 4.48-2.24 277.525333-130.005334 0.021334-4.245333a3.562667 3.562667 0 0 0-0.362667-1.6l-0.277333-0.384-0.704-0.789333-39.68-38.762667a200.490667 200.490667 0 0 1-59.797334-129.642667l-0.384-7.125333-0.128-6.997333v-90.133334c0-104.490667 82.986667-190.144 188.373334-193.493333l5.696-0.064z m0 64h-14.165334l-4.714666 0.064a129.557333 129.557333 0 0 0-125.354667 129.493334v90.133333l0.106667 5.845333a136.042667 136.042667 0 0 0 40.917333 92.117334l41.066667 40.149333 3.498666 3.84c10.154667 12.138667 15.744 27.477333 15.744 43.349333l-0.021333 6.336-0.256 4.522667a63.125333 63.125333 0 0 1-36.053333 51.093333L98.048 778.538667l-2.986667 1.493333c-12.544 6.826667-20.394667 20.010667-20.394666 34.346667v6.506666l0.042666 2.432a20.757333 20.757333 0 0 0 20.693334 19.349334h705.173333a20.757333 20.757333 0 0 0 20.757333-20.757334v-7.530666c0-15.168-8.768-28.992-22.528-35.413334L519.893333 648.277333a63.104 63.104 0 0 1-36.330666-57.152v-4.8c0-18.197333 7.338667-35.626667 20.352-48.341333l39.957333-38.997333a136.042667 136.042667 0 0 0 41.024-97.344v-90.752A129.557333 129.557333 0 0 0 455.338667 181.333333z m222.741333 0.149334a155.541333 155.541333 0 0 1 148.501333 150.186666l0.085334 5.205334V405.333333a159.786667 159.786667 0 0 1-45.546667 111.744l-4.48 4.394667-27.008 25.536 208.192 94.485333a94.613333 94.613333 0 0 1 55.061333 76.949334l0.341334 4.565333 0.106666 4.629333a72.341333 72.341333 0 0 1-64.746666 71.957334c-5.546667-29.077333-11.861333-50.282667-18.922667-63.637334l11.328 0.021334a8.32 8.32 0 0 0 8.341333-8.32c0-11.029333-5.909333-21.12-15.317333-26.517334l-2.645333-1.365333-62.933334-28.586667a167.125333 167.125333 0 0 0-15.317333-8.170666l-153.450667-71.893334A55.466667 55.466667 0 0 1 682.666667 551.168c0-16.917333 6.4-33.130667 17.770666-45.504l3.242667-3.264 29.013333-27.413333a95.786667 95.786667 0 0 0 29.824-64.362667L762.666667 405.333333v-68.48a91.562667 91.562667 0 0 0-56.469334-84.586666c-3.626667-15.616-13.013333-39.232-28.117333-70.805334z" p-id="4250"></path></svg>
						</view>
					</view>
				</view>
				<view class="nav-text">
					人脉
				</view>
			</view>
			<!-- 跳转独立的搜索页 -->
			<view class="nav-tab" :class="{'nav-tab-active':active==2}" @click="toIndex(2)">
				<view class="nav-icon" >
					<view class="circle">
						<view class="icon-wrap">
							<svg t="1622706798613" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4469" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M192 448c0-141.152 114.848-256 256-256s256 114.848 256 256-114.848 256-256 256-256-114.848-256-256z m710.624 409.376l-206.88-206.88A318.784 318.784 0 0 0 768 448c0-176.736-143.264-320-320-320S128 271.264 128 448s143.264 320 320 320a318.784 318.784 0 0 0 202.496-72.256l206.88 206.88 45.248-45.248z" p-id="4470"></path></svg>
						</view>
					</view>
				</view>
				<view class="nav-text">
					搜索
				</view>
			</view>
			<view class="nav-tab" :class="{'nav-tab-active':active==3}" @click="toIndex(3)">
				<view class="nav-icon" >
					<view class="circle">
						<view class="icon-wrap">
							<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 85.333333c129.6 0 234.666667 105.066667 234.666667 234.666667 0 84.256-44.394667 158.133333-111.072 199.52a425.28 425.28 0 0 1 152.853333 83.466667 32 32 0 1 1-41.493333 48.736A361.045333 361.045333 0 0 0 512 565.333333c-188.672 0-345.429333 144.672-361.344 331.413334a32 32 0 0 1-63.765333-5.429334c15.114667-177.322667 138.048-322.346667 301.546666-371.786666C321.76 478.165333 277.333333 404.266667 277.333333 320c0-129.6 105.066667-234.666667 234.666667-234.666667z m415.946667 627.381334l1.066666 1.013333a29.824 29.824 0 0 1 0 43.413333l-162.261333 152.96a31.925333 31.925333 0 0 1-22.762667 8.704 31.925333 31.925333 0 0 1-22.773333-8.704l-93.184-87.84a29.824 29.824 0 0 1 0-43.413333l1.077333-1.013333a32 32 0 0 1 43.904 0l70.976 66.901333 140.053334-132.021333a32 32 0 0 1 43.904 0zM512 149.333333c-94.261333 0-170.666667 76.405333-170.666667 170.666667s76.405333 170.666667 170.666667 170.666667 170.666667-76.405333 170.666667-170.666667-76.405333-170.666667-170.666667-170.666667z" /></svg>
						</view>
					</view>
				</view>
				<view class="nav-text">
					好友
				</view>
			</view>
			<view class="nav-tab" :class="{'nav-tab-active':active==4}" @click="toIndex(4)">
				<view class="nav-icon" >
					<view class="circle">
						<view class="icon-wrap">
							<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M518.4 59.2c-147.2 0-267.2 120-267.2 267.2s120 267.2 267.2 267.2 267.2-120 267.2-267.2S665.6 59.2 518.4 59.2z m0 486.4c-120 0-219.2-97.6-219.2-219.2 0-120 97.6-219.2 219.2-219.2 120 0 219.2 97.6 219.2 219.2S640 545.6 518.4 545.6zM750.4 564.8c-11.2-6.4-25.6-3.2-33.6 8-6.4 11.2-3.2 25.6 8 33.6 115.2 73.6 184 198.4 184 336 0 12.8 11.2 24 24 24s24-11.2 24-24c1.6-155.2-76.8-296-206.4-377.6zM273.6 564.8C144 646.4 67.2 787.2 67.2 940.8c0 12.8 11.2 24 24 24s24-11.2 24-24c0-136 68.8-262.4 184-336 11.2-6.4 14.4-22.4 8-33.6-8-9.6-22.4-12.8-33.6-6.4z"/></svg>
						</view>
					</view>
				</view>
				<view class="nav-text">
					我的
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			active: {
				type: [String, Number],
				default: 0,
			},
		},
		data() {
			return {
				home: 0,
			}
		},
		onLoad() {
		},
		onShow() {
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			toIndex(index) {
				this.$emit('toIndex', index);
				if (index === 0) {
					uni.navigateTo({
						url: '/pages/article/index',
					});
				}
				if (index === 1) {
					uni.navigateTo({
						url: '/pages/article/detail?id=12856',
					});
				}
				if (index === 2) {
					uni.navigateTo({
						url: '/pages/article/search',
					});
				}
				if (index === 4) {
					uni.navigateTo({
						url: '/pages/user/index',
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: $navHeight;
		box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);
		background: #fff;
		z-index: 10;
	}

	.nav-tab {
		fiex: 1;
		text-align: center;
		width: 100%;
		height: $navHeight;
	}

	.nav-icon {
		height: 30px;
		color: $mediumGrey;
		box-sizing:border-box;
		padding: 4px 0 2px 0;
		
		image {
			width: 40rpx;
			height: 40rpx;
		}
		
		.icon-wrap {
			width: 48rpx;
			height: 48rpx;
			margin: 0 auto;
		}
	}

	.nav-text {
		font-size: 11px;
		height: 19px;
		color: $mediumGrey;
		font-weight: 400;
	}

	.nav-tab-active .circle {
		height: 38px;
		width: 38px;
		line-height: 90rpx;
		position: relative;
		top: -14px;
		left: calc(50% - 19px);
		border-radius: 50%;
		background: $dominantHue;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
		
		.icon-wrap {
			padding-top: 4rpx;
			fill: white;
		}
	}

	.nav-tab-active .iconfont {
		color: #fff;
	}

	.nav-tab-active .nav-text{
		color: $dominantHue;
	}
	.nav-box{
		/* position: absolute; */
		display: flex;
		width: 100%;
		box-sizing:border-box;
	}

	/*苹果x适配 H5APP*/
	@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		.bottom {
			height: $navHeight + $navBoxHeight;
		}
	}

	/*苹果xs适配 H5APP*/
	@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
		.bottom {
			height: $navHeight + $navBoxHeight;
		}
	}

	/*苹果xr适配 H5APP*/
	@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
		.bottom {
			height: $navHeight + $navBoxHeight;
		}
	}
	
</style>